<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Responsive Flexbox Layout</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <!-- 媒体查询+flex布局实现响应式 -->
    <header>  
        <h1>My Responsive Website</h1>  
    </header>  
    <main class="content">  
        <section class="item">Item 1</section>  
        <section class="item">Item 2</section>  
        <section class="item">Item 3</section>  
        <section class="item">Item 4</section>  
    </main>  
    <footer>  
        <p>&copy; 2023 My Website</p>  
    </footer>  
</body>  
</html>